<template>
	<view class="page" :style="'height:' + height + 'rpx'">
			<view class="row">
				<view class="item">
					<view class="title">使用场景:</view>
					<view class="content">
						<picker class="itemPicker" @change="sceneChange" :value="sceneIndex" :range="sceneArray">
							<view class="uni-input">{{sceneArray[sceneIndex]}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
					</view>
				</view>
				<view class="item" v-if="isDevomber">
					<view class="title">鸽棚编号:</view>
					<view class="content">
						<picker class="itemPicker" @change="devomberChange" :value="devomberIndex" :range="devomberArray">
							<view class="uni-input">{{devomberArray[devomberIndex]}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
					</view>
				</view>
				<view class="item">
					<view class="title">设备状态:</view>
					<view class="content">
						<picker class="itemPicker" @change="stateChange" :value="stateIndex" :range="stateArray">
							<view class="uni-input">{{stateArray[stateIndex]}}</view>
						</picker>
						<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
					</view>
				</view>
					<button class="search" @click="search()">查询</button>
			</view>
			<view class="module">
				<view class="vedio">
					<view class="iconfont icon-24gf-playCircle"></view>
				</view>
			</view>
			<view class="module">
				<view class="vedio">
					<view class="iconfont icon-24gf-playCircle"></view>
				</view>
			</view>
			<view class="module">
				<view class="vedio">
					<view class="iconfont icon-24gf-playCircle"></view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		name: 'vedio',
		meta: {
		    title: "监控页面",
		  },
		  created() {
		  	let that = this;
		  	uni.getSystemInfo({
		  		success: function(res) {
		  			let pxToRpxScale = 750 / res.windowWidth;
		  			// console.log(res.windowHeight);
		  
		  			that.height = res.windowHeight * pxToRpxScale;
		  			console.log(that.height)
		  		}
		  	});
		  },
		data() {
			return {
				height: 0,
				sceneArray: ["基地","鸽棚","投喂机","其他"],
				sceneIndex: 0,
				stateArray: ["全部","未启用","使用中","故障"],
				stateIndex: 0,
				devomberArray: ["A01","A02"],
				devomberIndex: 0,
				isDevomber: false
			}
		},
		methods: {
			sceneChange(e) {
				console.log(e.detail.value);
				this.sceneIndex = e.detail.value;
				if (this.sceneIndex == 1) {
					this.isDevomber = true;
				} else {
					this.isDevomber = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #FFFFFF;
		.row {
			margin-left: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.item {
				// background-color: pink;
				height: 70rpx;
				display: flex;
				font-size: 32rpx;
				letter-spacing: 2rpx;
				margin-bottom: 16rpx;
				padding: 20rpx;
			
				.title {
					font-weight: 700;
					margin-right: 20rpx;
				}
			
				.content {
					display: flex;
			
					.itemPicker {
						font-weight: 500;
						// border-bottom: 1rpx solid #000000;
					}
				}
			}
			.search {
				width: 130rpx;
				height: 60rpx;
				margin: 1rpx;
				// margin-top: 10rpx;
				position: absolute;
				top: 86rpx;
				right: 26rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				background-color: #23b8ff;
				color: #FFFFFF;

			}
		}
		.module {
			margin-top: 100rpx;
			.vedio {
				width: 80%;
				height: 350rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				background: rgba(0, 0, 0, 0.3);
				position: relative; //后面要改
				.iconfont {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -25rpx;
					margin-left: -25rpx;
					font-size: 76rpx;
					color: #DC143C;
				}
			}
		}

	}

</style>
